<template>
  <div class="login-wrapper">
    <div class="container">
      <div class="logo-wrapper">
        <img :src="logo" alt="" />
      </div>
      <div class="inp">
        <Input
          :placeholder="$t('login.userPlaceHolder')"
          size="large"
          :maxlength="maxlength"
          v-model="userName">
          <Icon type="ios-contact" slot="prefix" />
        </Input>
        <Input
          :placeholder="$t('login.userPlaceHolder')"
          size="large"
          class="pwd"
          type="password"
          v-model="password"
          password
          :maxlength="maxlength"
          @on-keyup="pswChange($event)"
        >
          <Icon type="ios-lock" slot="prefix" />
        </Input>
      </div>
      <div class="auto-login">
        <div class="left">
          <Checkbox size="large" v-model="autoLogin">{{ $t('login.autoLogin') }}</Checkbox>
        </div>
        <div class="right">
          <router-link to="/404">{{ $t('login.forget') }}</router-link>
        </div>
      </div>
      <div class="login-btn">
        <Button @click="login" type="primary" size="large" long>{{
          $t('login.login')
        }}</Button>
      </div>
    </div>
  </div>
</template>
<script>
import config from '@/utils/config'
import { Input, Checkbox, Button } from 'view-design'
import { login } from '@/services/login'
import { mapActions } from 'vuex'
export default {
  components: {
    Input,
    Checkbox,
    Button
  },
  data () {
    return {
      logo: config.shrinkLogoUrl,
      userName: '',
      password: '',
      autoLogin: false,
      maxlength: 20
    }
  },
  created () {
    // this.initMenuData({
    //   data: {
    //     userName: '小白',
    //     role: 'admin',
    //     avatar: 'src/assets/images/avatar.jpg'
    //   }
    // })
    // this.$router.push({
    //   name: 'home'
    // })
  },
  methods: {
    ...mapActions(['setUserInfo', 'setRouteTagNames']),
    pswChange (ev) {
      if (ev.keyCode === 13) {
        this.login()
      }
    },
    login () {
      if (!this.userName || !this.password) {
        this.$Message.warning('用户名或密码不能为空')
      } else {
        let param = {
          userName: this.userName,
          password: this.password
        }
        login(param).then(res => {
          if (res.code === 200) {
            this.initMenuData(res)
            this.$router.push({
              name: 'electmaintenance'
            })
          }
        })
      }
    },
    initMenuData (res) {
      this.setUserInfo(res.data)
      this.setRouteTagNames([])
    }
  }
}
</script>
<style lang="stylus" scoped>
.login-wrapper
  width 100%
  height 100%
  display flex
  justify-content center
  align-items center
  position relative
  &:after
    z-index 0
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    content ''
    background-image url('~@/assets/images/login_bg.jpg')
    background-size cover
    filter blur(50px)
  .container
    z-index 1
    margin-top -200px
    width 350px
    .logo-wrapper
      display flex
      justify-content center
      align-items center
      img
        width 80%
    .inp
      margin-top 20px
      display flex
      flex-direction column
      justify-content flex-start
      align-items center
      .pwd
        margin-top 20px
    .auto-login
      margin-top 20px
      display flex
      justify-content space-between
      align-items center
    .login-btn
      width 100%
      margin-top 20px
      display flex
      justify-content center
      align-items flex-start
</style>
